import React from 'react';
import { Link, History } from 'react-router';
import classNames from 'classnames';
import * as Nav from '../config/page/Nav';

class Footer extends React.Component {

  constructor() {
    super();
  }

  static propTypes = {
      footerIndex : React.PropTypes.number
  }

  static defaultProps = {
      footerIndex : 0
  }

  renderNavItem (nav, index){
    let { footerIndex } = this.props;

    let navIcon = (footerIndex == index? nav.activeIcon: nav.icon );
    let navStatus = (footerIndex == index? "active": "" );

    return (
       <li data-nav="index" className={navStatus}>
          <Link to={nav.link}>
              <i className={navIcon}></i>
              <span>{nav.text}</span>
          </Link>
       </li>
    )
  }

  render() {

    return(
        <footer className="navigation">
          <ul>
            { Nav.items && Nav.items.map((nav, i) =>  
              this.renderNavItem(nav, i)
            )}
          </ul>
        </footer>
    )
  }
}

export default Footer;
